<%@    page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    String webSocketPath = request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <base href="<%=basePath%>">
    <title>数据诊断页面</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is	my page">

    <link rel="stylesheet" type="text/css" href="jquery/easyui1.4.2/themes/gray/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery/easyui1.4.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="css/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/assets/css/ace.min.css"/>
    <link rel="stylesheet" href="css/assets/css/ace-rtl.min.css"/>
    <link rel="stylesheet" href="css/assets/css/ace-skins.min.css"/>

    <script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="jquery/easyui1.4.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery/easyui1.4.2/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="jquery/underscore-min.js"></script>
    <script type="text/javascript" src="mintor/content/js/datadiagnosis.js"></script>
    <script type="text/javascript">var type = 0;</script>
    <script>
        function Tab(num) {
            if (num == 1) {
                document.getElementById("d1").style.display = "block";
                document.getElementById("L1").style.backgroundColor = "#7db4d8";
                document.getElementById("d2").style.display = "none";
                document.getElementById("L2").style.backgroundColor = "#eef4f9";
            }
            else {
                document.getElementById("d2").style.display = "block";
                document.getElementById("L2").style.backgroundColor = "#7db4d8";
                document.getElementById("d1").style.display = "none";
                document.getElementById("L1").style.backgroundColor = "#eef4f9";
            }
        }
    </script>

    <style type="text/css">
        #L1 {
            background-color: #7db4d8;
            cursor: hand;
            color: #000000;
            border-left: 1px solid #FFFFFF;
            border-top: 1px solid #FFFFFF;
            border-right: 1px solid gray;
            font-weight: bold;
        }

        #L2 {
            background-color: #eef4f9;
            cursor: hand;
            color: #000000;
            border-left: 1px solid #FFFFFF;
            border-top: 1px solid #FFFFFF;
            border-right: 1px solid gray;
            border-bottom: 1px solid #FFFFFF;
        }

        .btn-success,
        .btn-success:hover {
            background-color: #92c0ea !important;
            border-color: #92c0ea
        }

        .btn-success,
        .btn-success :active {
            background-color: #92c0ea !important;
            border-color: #92c0ea
        }

        .btn-success,
        .btn-success:focus {
            background-color: #92c0ea !important;
            border-color: #92c0ea
        }

        .header.green {
            border-bottom-color: #92c0ea;
        }

        .green {
            color: #92c0ea !important;
        }

        /*.widget-box {*/
            /*border-bottom: 0px;*/
        /*}*/

        .panel-body {
            padding: 0px;
        }

        input[readonly] {
            background: #ffffff !important;
            cursor: default;
        }


        table {

            /*border-collapse: collapse;*/

            font-family: Futura, Arial, sans-serif;



        }

        th,td {

            padding: .55em;

        }

        th {

            background: #7db4d8 none repeat scroll 0 0;

            border: 1px solid #7db4d8;

            border-radius:29px;
            color: #fff;
            vertical-align:bottom;

        }

        td {

             border: 1px solid #eef4f9;

        }

        tbody tr:nth-child(odd) {

            background: #eef4f9;

        }

        th:first-child {

            border-radius: 29px 0 0 0;

        }

        th:last-child {

            border-radius: 0 29px 0 0;

        }

        tr:last-child td:first-child {

            border-radius: 0 0 0 29px;

        }

        tr:last-child td:last-child {

            border-radius: 0 0 29px 0;

        }

        img{
            width: 18%;
            height:18%;
        }
    </style>
</head>

<body style="background-color:white;">

<table border=0 cellspacing=0 cellpadding=0 width=549 id=secTable style="margin-left: 12px;margin-top: 10px">
    <tr height=20 align=center>
        <td width=10% height=32px id="L1" onclick="Tab(1)">历史数据分析</td>
        <td width=10% height=32px id="L2" onclick="Tab(2)">实时故障预警</td>
    </tr>
</table>

<div id="d1" style="display:block;">
    <div class="widget-box" style="margin:16px 24px;padding-bottom:15px;text-align: center;">
        <div class="widget-header header-color-blue" style="border-top-left-radius:10px;border-top-right-radius:10px;">
            <h4 style="color:white;font-family: '微软雅黑'">历史数据分析</h4>
        </div>
        <div class="widget-body" style="border-bottom-right-radius:10px;border-bottom-left-radius:10px;">
            <div class="widget-main">
                <div class="row">
                    设备
                    <input id="equipmentId" name="equipmentId"
                           style="width: 120px;	height:	29px;"
                           class="easyui-combobox form-control"
                           data-options="required:true">
                    &nbsp;&nbsp;传感器
                    <input id="sensorTypeId" name="sensorTypeId"
                           style="width: 120px; height: 29px;"
                           class="easyui-combobox	form-control"
                           data-options="required:true">
                    &nbsp;&nbsp;<button class="btn btn-sm btn-primary center"
                                        style="margin-top:2px;" onclick="checksensor()">当天查询
                </button>
                    &nbsp;&nbsp;时间
                    <input id="date" name="timeDate"
                           style="width: 120px; height: 29px;"
                           class="easyui-datebox select"
                           data-options="required:true">
                    &nbsp;&nbsp;<button class="btn btn-sm btn-primary center"
                                        style="margin-top:2px;" onclick="checksensor2()">历史查询
                </button>
                    <br>
                    <div class="row-left" style="margin:0 auto;width: 620px;display:inline-block;margin-right: 10px;">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-top:10px;width:620px">
                            <div class="widget-box" style="width:610px">
                                <div class="widget-header header-color-blue2" style="border-top-left-radius:10px;border-top-right-radius:10px;">
                                    <h4 style="color:white">数据基本信息</h4>
                                </div>
                                <div class="widget-body" style="height:	300px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;">
                                    <table id="dataGrid" data-options="fit:true,border:false"></table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row-right" style="width:620px;margin:0 auto;display:inline-block;margin-right: 10px;">
                        <div class="col-xs-12 col-sm-12	col-md-12 col-lg-12" style="margin-top:10px;">
                            <div class="widget-box" style="">
                                <div class="widget-box">
                                    <div class="widget-header  header-color-blue2" style="border-top-left-radius:10px;border-top-right-radius:10px;">
                                        <h4 style="color:white">故障传感器详细</h4>
                                    </div>
                                    <div class="widget-body" style="height:	300px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;">
                                        <div class="form-group col-x" style="margin-top: 20px;margin-left: 10px">
                                            故障传感器
                                            <input id="modelSelect" name="equipmentId" style="width: 120px;	height:	29px;"
                                                   class="easyui-combobox form-control" data-options="required:true">
                                            &nbsp;&nbsp;<button class="btn btn-sm btn-primary center" style="margin-top: 0px;"
                                                                      onclick="finddetail()">详查
                                        </button>

                                        </div>
                                        <div class="form-group col-xm-12 col-sm-3 col-md-1">

                                        </div>
                                        <div class="easyui-layout" data-options="fit:true,border:false">
                                            <div data-options="region:'center',fit:true,border:false">
                                                <table id="dataGrid2" data-options="fit:true,border:false"></table>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

</div>

<script language="javascript" type="text/javascript">
    var echo_websocket;

//    window.onload = function demofun(){
//        c = "010120000032110000000201021001";
//        a = new Array();
//        a = c.split('');
//        for (var i = 0; i < a.length; i++) {
//        if(a[i]!='0'){
//            u = i+1;
//            imag = document.getElementById("img"+u);
//            imag.src = "/WhutMonitor/img/wrong.png";
//        }else{
//            u = i+1;
//            imag = document.getElementById("img"+u);
//            imag.src = "/WhutMonitor/img/right.png";
//            }
//        }
//    }

    window.onload = function send_echo() {
        //var wsUri = "ws://localhost:8080/WhutMonitor/websocket/wsj";
        var socketPath = "<%=webSocketPath%>";
        echo_websocket = new WebSocket("ws://" + socketPath + "/websocket/wsj");
        echo_websocket.onopen = function (evt) {

        };
        echo_websocket.onmessage = function (evt) {
//            a = new Array();
            a = evt.data.split('');
            for (var i = 0; i < a.length; i++) {
                if(a[i]!='0'){
                    u = i+1;
                    imag = document.getElementById("img"+u);
                    imag.src = "/WhutMonitor/img/wrong.png";
                }else{
                    u = i+1;
                    imag = document.getElementById("img"+u);
                    imag.src = "/WhutMonitor/img/right.png";
                }
            }
            //echo_websocket.close();
        };
        echo_websocket.onerror = function (evt) {
            document.write('<span style="color: red;">ERROR:</span>' + evt.data);
            //echo_websocket.close();
        };
    }
    function doSend(message) {
        echo_websocket.send(message);
        document.write("Sent message: " + message);
    }
</script>

<div id="d2" style="display:none;">
    <div class="widget-box" style="margin:16px 24px;padding-bottom:15px;text-align: center;">
        <div class="widget-header header-color-blue" style="border-top-left-radius:10px;border-top-right-radius:10px;">
            <h4 style="color:white">实时故障预警</h4>
        </div>
        <div class="widget-body" style="position:relative">
            <div class="widget-main" >
                <hr>
                    <table  style="width:70%;margin-left: 240px" cellpadding="6">
                        <tr>
                            <th align="center" style="width:80px"></th>
                            <th  align="center"><p align="center">通道一</p></th>
                            <th  align="center"><p align="center">通道二</p></th>
                            <th  align="center"><p align="center">通道三</p></th>
                            <th  align="center"><p align="center">通道四</p></th>
                            <th  align="center"><p align="center">通道五</p></th>
                            <th  align="center"><p align="center">通道六</p></th>
                        </tr>
                        <tr align="center" id="hang1">
                            <td class="one" id="jd1"><b>节点15</b></td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img15"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img30"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img45"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img60"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img75"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img90"/><br></div>
                            </td>
                        </tr>
                        <tr align="center">
                            <td class="one"><b>节点14</b></td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img14"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img29"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img44"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img59"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img74"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img89"/><br></div>
                            </td>
                        </tr>
                        <tr align="center">
                            <td class="one"><b>节点13</b></td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img13"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img28"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img43"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img58"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img73"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img88"/><br></div>
                            </td>
                        </tr>
                        <tr align="center">
                            <td class="one"><b>节点12</b></td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img12"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img27"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img42"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img57"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img72"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img87"/><br></div>
                            </td>
                        </tr>
                        <tr align="center">
                            <td class="one"><b>节点11</b></td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img11"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img26"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img41"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img56"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img71"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img86"/><br></div>
                            </td>
                        </tr>
                        <tr align="center">
                            <td class="one"><b>节点10</b></td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img10"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img25"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img40"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img55"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img70"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img85"/><br></div>
                            </td>
                        </tr>
                        <tr align="center">
                            <td class="one"><b>节点9</b></td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img9"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img24"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img39"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img54"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img69"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img84"/><br></div>
                            </td>
                        </tr>
                        <tr align="center">
                            <td class="one"><b>节点8</b></td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img8"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img23"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img38"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img53"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img68"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img83"/><br></div>
                            </td>
                        </tr>
                        <tr align="center">
                            <td class="one"><b>节点7</b></td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img7"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img22"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img37"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img52"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img67"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img82"/><br></div>
                            </td>
                        </tr>
                        <tr align="center">
                            <td class="one"><b>节点6</b></td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img6"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img21"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img36"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img51"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img66"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img81"/><br></div>
                            </td>
                        </tr>
                        <tr align="center">
                            <td class="one"><b>节点5</b></td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img5"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img20"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img35"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img50"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img65"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img80"/><br></div>
                            </td>
                        </tr>
                        <tr align="center">
                            <td class="one"><b>节点4</b></td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img4"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img19"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img34"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img49"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img64"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img79"/><br></div>
                            </td>
                        </tr>
                        <tr align="center">
                            <td class="one"><b>节点3</b></td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img3"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img18"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img33"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img48"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img63"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img78"/><br></div>
                            </td>
                        </tr>
                        <tr align="center">
                            <td class="one"><b>节点2</b></td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img2"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img17"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img32"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img47"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img62"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img77"/><br></div>
                            </td>
                        </tr>
                        <tr align="center">
                            <td class="one"><b>节点1</b></td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img1"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img16"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img31"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img46"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img61"/><br></div>
                            </td>
                            <td>
                                <div><img src='/WhutMonitor/img/right.png' width=25% id="img76"/><br></div>
                            </td>
                        </tr>

                    </table>
            </div>
        </div>
    </div>
</div>


</body>
</html>